<script setup>
import SidebarItem from "@/components/SidebarItem.vue";
import {useRootSetting} from "@/hooks/setting/useRootSetting.js";
import {computed} from "vue";


defineProps({
  mode: {
    type: String,
    default: 'vertical',
  },
});
const {appConfig, menuList} = useRootSetting();
const collapse = computed(() =>
    appConfig.value.sidebarMode === 'horizontal' ? false : appConfig.value.collapseMenu,
);
const menuData = computed(() => {
  return appConfig.value.sidebarMode === 'blend' ? menuList.value.menuList[1].children : menuList.value.menuList;
})


</script>

<template>
  <el-scrollbar wrap-class="scrollbar-wrapper">
    <!--
      default-active	        页面加载时默认激活菜单的 index
      unique-opened	          是否只保持一个子菜单的展开
      collapse	              是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
      mode	                  菜单展示模式
      collapse-transition	    是否开启折叠动画
-->
    <el-menu
        default-active="/nested/menu2"
        :unique-opened="true"
        :collapse="collapse"
        :mode="mode"
        :collapse-transition="true">
      <SidebarItem
          v-for="menuRoute in menuData"
          :key="menuRoute.path"
          :item="menuRoute"
          :is-nest="false"
          :base-path="menuRoute.path"
          :collapse="collapse"
          :mode="mode"
      />
    </el-menu>
  </el-scrollbar>
</template>
